<template>
  <div class="container pd100">
    <div class="header van-hairline--bottom">
      <div class="header-hd">
        <van-icon class="header-media" name="chat-o" />
        <div class="header-inner" v-if="!orderInfo.status">
          <!-- <div class="header-title">{{orderInfo.statusStr}}</div> -->
          <div class="header-txt">请在{{showTime}}时间内完成支付</div>
        </div>
      </div>
    </div>
    <template>
      <div class="address-box mb10">
        <div class="address-box-hd">
          <div class="address-box-inner">
            <van-icon name="location-o" class="address-box-inner-icon"/>
            <div class="address-box-inner-title">收货人：{{orderInfo.userNickName}}</div>
            <!-- <div class="address-box-inner-title">{{defaultAddress.consigneePhone}}</div> -->
          </div>
          <div class="address-box-inner-bottom">收货地址：{{orderInfo.trainName}}列车 {{orderInfo.trainSplitSn}} 车厢 {{orderInfo.seatSn}} 号座</div>
        </div>
        <div class="address-box-bd"><van-icon name="arrow" /></div>
      </div>
    </template>
    <van-popup v-model="showPicker" round position="bottom">
        <van-picker
          title="收货地址"
          show-toolbar
          :columns="addressList"
          @confirm="onConfirm"
          @cancel="onCancel"
          @change="onChange"
        />
        </van-popup>
    <div class="order-info">
      <van-cell-group>
        <van-cell title="商品列表"></van-cell>
        <van-card
          :num="orderInfo.amount"
          :price="orderInfo.totalMoney/orderInfo.amount"
          :title="orderInfo.goodsName"
          :thumb="orderInfo.goodsCoverUrl"
          @click-thumb="toDetail(item)"
        >
        </van-card>

        <!-- <van-coupon-cell
          v-if="coupons.length"
          :coupons="coupons"
          :chosen-coupon="chosenCoupon"
          @click="onShowCoupons"
        /> -->
        <van-cell v-if="isNeedLogistics" title="配送方式" value="外卖"></van-cell>
          </van-cell-group>
          <!-- <van-cell-group>
            <van-field
              class="mb10"
              v-model="remark"
              label="买家留言"
              type="textarea"
              placeholder="点击给商家留言"
              rows="1"
              autosize
            />
          </van-cell-group> -->
          <van-cell-group class="mb20">
            <van-cell title="支付工具">支付宝</van-cell>
            <!-- <van-cell title="余额" :label="'账户余额：￥'+balance+'元'" size="large">
                <template slot="default">
          <van-switch
            v-model="isBalancePay"
            active-color="#f44"
            inactive-color="#d7d7d7"
          />
          </template>
        </van-cell> -->
        </van-cell-group>
          <!-- <van-cell title="商品金额" :value="'¥'"></van-cell> -->
          <van-cell title="运费" value="+0.00"></van-cell>
          <van-cell title="优惠" value="-0"></van-cell>
            </div>
            <van-submit-bar
              button-text="支付订单"
              @submit="onSubmit"
            >
            <div slot="default" class="submit-bar-left">
              <span>合计：</span>
              <span class="submit-bar-price">¥ {{orderInfo.totalMoney}}</span>
          </div>
          </van-submit-bar>
  </div>
</template>

<script>
import { storage, sessionStorage } from '@/common/util'
import { mapState, mapMutations } from 'vuex'
export default {
  data() {
    return {
      remark: '',
      chosenCoupon: -1,
      coupons: [],
      showList: false,
      isNeedLogistics: true, // 是否需要物流信息
      hasDiscount: false,
      goodsInfo: [],
      isBalancePay: true, //  钱包支付
      balance: 0,
      expireMinutes: 60,
      marketing: {},
      downTime: 0,
      orderInfo: [],
      showPicker: false,
      addressList: [],
      addressListAll: [],
      defaultAddress: {}
    }
  },
  computed: {
    ...mapState(['user']),
    endTime () {
      return Date.now() + 1800000
    },
    showTime () {
      let min = Math.floor(this.downTime / 60)
      let sec = Math.floor(this.downTime % 60)
      return `${min}分钟${sec < 10 ? '0' + sec : sec}秒`
    }
  },
  created() {
    this.getOrderDetail()
    // this.getAddressList()
  },
  methods: {
    ...mapMutations(['updateDefaultAddress']),
    // onAddressChoose () {
    //   this.showPicker = true
    // },
    /**
     * 去商品详情
     */
    toDetail (item) {
      this.$router.push({
        path: `/goods-detail/${item.goods.id}`
      })
    },
    /**
     * 获取收货地址
     */
    getAddressList() {
      const query = {
        userId: this.user.id
      }
      this.$api.cart.getAddressList(query).then(res => {
        if (res.code === 200) {
          this.addressListAll = res.data
          this.addressList = res.data.map(item => {
            return item.address
          })
          // this.defaultAddress = res.data
        }
      })
    },
    onConfirm(val) {
      this.defaultAddress = this.addressListAll.filter(item => item.address === val)
      // this.defaultAddress.address = val
      this.showPicker = false
      let params = {
        orderSerialNumber: this.$route.query.id,
        consigneeAddress: this.defaultAddress.address,
        consigneePhone: this.defaultAddress.consigneePhone,
        consigneeName: this.defaultAddress.consigneeName
      }
      this.$api.cart.getGood(params).then(res => {
        if (res.code === 200) {
        }
      })
    },
    /**
     * onCancel
     */
    onCancel() {
      this.showPicker = false
    },
    /**
     * onChange
     */
    onChange() {

    },
    /**
     * 倒计时 30分钟
     */
    timeOut () {
      this.downTime = Math.floor(this.endTime - Date.now()) / 1000
      this.timer = setInterval(() => {
        this.downTime--
        if (this.downTime < 1) {
          clearInterval(this.timer)
        }
      }, 1000)
    },
    // 获取订单详情
    getOrderDetail() {
      let query = {
        id: this.$route.query.id
      }
      this.$api.cart.getOrderDetail(query).then(res => {
        if (res.code === 200) {
          this.orderInfo = res.data
          // this.defaultAddress.address = res.data.consigneeAddress
          // this.defaultAddress.consigneeName = res.data.consigneeName
          // this.defaultAddress.consigneePhone = res.data.consigneePhone
          this.timeOut()
        }
      })
    },
    onShowCoupons() {
      this.showList = !this.showList
    },
    onSubmit() {
      const params = {
        id: this.$route.query.id,
      }
      this.$api.cart.finishOrder(params).then(res => {
        if (res.code === 200) {
          this.$toast({
            type: 'success',
            message: '支付成功！'
          })
          this.$router.replace({
            path: '/order-detail',
            query: {
              id: this.$route.query.id
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.header-media{
  display:inline-block;
  margin-right:10px;
  font-size:16px;
  vertical-align:middle
}
.header-inner{
  display:inline-block;
  vertical-align:middle
}
  .address-box{
    position: relative;
    box-sizing: border-box;
    min-height: 60px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding:8px 15px;
    background: #fff;
    &-hd{
      flex: 1;
      // padding:0 10px;
      padding-left: 20px;
    }
    &-bd{
      padding-left: 5px;

    }
    &-inner{
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      &-icon{
        position: absolute;
        top:2px;
        left: -20px;
      }
      &-title{
        font-size: 16px;
        color: #333;
        font-weight: bold;
        margin-bottom: 5px;
      }
      &-bottom{
        font-size: 12px;
        color: #666;
      }
    }
    &:before{
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      height: 2px;
      background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
      background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
      background-size: 80px;
      content: '';
    }
  }
  .address-card{
    position: relative;
    padding: 10px 15px;
    align-items: center;
    &:before{
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      height: 2px;
      background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
      background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
      background-size: 80px;
      content: '';
    }
  }
  .address-card .van-cell__left-icon{
    color: #1989fa;
    font-size: 40px;
  }
  .address-card .van-cell__title{
    line-height: 40px;
  }
  .order-info{
    box-sizing: border-box;
    width:100%;
    // padding:0 15px;
    // background: #fff;
  }
  .submit-bar-left{
    flex: 1;
    padding-right: 12px;
    color: #323233;
    font-weight: 500;
    text-align: right;
  }
  .submit-bar-left span{
    display: inline-block;
  }
  .submit-bar-price{
    color: #f44;
    font-size: 18px;
  }

</style>

